<template>
  <el-carousel
    v-if="banners.length"
    height="330px"
    indicator-position="none"
    v-bind="$attrs"
  >
    <el-carousel-item
      v-for="item in banners"
      :key="item.id"
      :label="item.name"
      @click="handleClickBanner(item)"
    >
      <img
        style="width: 100%;cursor: pointer;"
        :src="processImageUrl(item.img)"
        :alt="item.name"
      />
    </el-carousel-item>
  </el-carousel>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { Banner } from "../../types";
import PublicService from "../../services/PublicService";
import { processImageUrl } from "@/utils";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "banner",
  setup() {
    const router = useRouter()
    const banners = ref<Banner[]>([]);
    onMounted(() => {
      PublicService.getBanners().then((resp) => {
        //console.log("getBanners", resp);
        const { code, data } = resp.data;
        if (code !== 0) return;
        banners.value = data.list;
        // console.log(data.list,'轮播图')
      });
    });

    function handleClickBanner(item: Banner) {
      if (!item.url.length) return
      if (item.url.indexOf("http") === -1) {
        if (item.target === '_self') {
          router.push(item.url)
        } else {
          window.open(import.meta.env.VITE_BASE_URL + item.url, '_blank')
        }
      } else {
        window.open(item.url, item.target)
      }
    }

    return {
      banners,
      processImageUrl,
      handleClickBanner,
    };
  },
});
</script>

<style lang="scss" scoped></style>
